<template>
  <div>
    <el-select v-bind="$attrs" v-model="selectValue" @change="changeValue" size="small"
               class="input-view" style="width: 12rem" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <div class="value-view">{{ selectLabel }}</div>
  </div>
</template>

<script>
import {getLocalDataAll} from "../../../utils/local"

export default {
  name: "selector",
  props: {
    value: {},
    billType: {
      type: String
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.selectValue = val
      }
    },
    billType: {
      immediate: true,
      handler(val) {
        if (val == 'company') this.options = this.local.company
        if (val == 'busNum') this.options = this.local.busNum
        if (val == 'user') this.options = this.local.user
      }
    }
  },
  data() {
    return {
      local: getLocalDataAll(),
      options: [],
      selectValue: ''
    }
  },
  computed:{
    selectLabel(){
      let selectItem=this.options.find(item=>item.value==this.selectValue)
      return selectItem?.label
    }
  },
  methods: {
    changeValue(val) {
      this.$emit("input", this.selectValue)
    }
  }
}
</script>

<style scoped>
.input-view {
  margin-left: 5px;
}

.value-view {
  display: none;
}

::v-deep.input-view > .el-input > .el-input__inner {
  color: #111;
  height: 2.8rem;
  font-size: 1rem;
  line-height: 2.8rem;
  background: transparent;
}

@media print {
  .input-view {
    display: none;
  }

  .value-view {
    display: flex;
    min-width: 70px;
    margin-left: 10px;
    color: #370a0a;
  }
}
</style>
